<template>
  <div class="hotCourses" style="margin-top: 8vh">
    <van-config-provider :theme-vars="themeVars">
      <van-card
        v-for="item in hotCoursesData.list2"
        :key="item.id"
        :price="formatMoney(item.price)"
        :title="item.title"
        :thumb="hotCoursesData.image5"
        :origin-price="399"
      >
        <template #num>
          <span> {{ item.num }} 人正在学习</span>
        </template>

        <template #tags>
          <van-tag plain type="danger" style="margin-top: 2vh"
            >限时优惠</van-tag
          >
        </template>
      </van-card>
    </van-config-provider>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'HotCourses',
  data() {
    return {
      hotCoursesData: {},
      themeVars: {
        cardThumbSize: '15vh',
        carTextSize: '2vh',
        cardPriceColor: '#ffc71c',
        cardTitleFontSize: '2vh',
        cardBackgroundColor: '#fff',
        navBarTitleFontWeight: 'bolder',
      },
    }
  },
  created() {
    axios
      .get('/mock/api/home/list')
      .then((mockData) => {
        this.hotCoursesData = mockData.data.data
      })
      .catch(console.error)
  },

  methods: {
    formatMoney(val) {
      return Number(val).toFixed(1)
    },
  },
}
</script>

<style lang="less" scoped>
:deep(.van-card__title) {
  font-weight: bolder;
  font-size: 1.8vh;
}
</style>
